<template>
    <div class="template-wrapper">
        <cardBox class="menu-wrapper" title="目录" icon="&#xe6f2;">
            <template #right>
                <el-select v-model="currentBoxId" placeholder="请选择" size="small" style="width:150px" @change="handleChangeMenuSelect">
                    <el-option
                    v-for="item in menuSelect"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </template>
            <div  class="menu-tree">
                <treeMenu :treeData="menuTree" name="lable" @menuLeftClick="handleMenuLeftClick" ref="treeMenu" v-if="menuTree.length > 0"/>
                <noData showMenu v-else/>
            </div>
        </cardBox>
        <div class="right-wrapper">
            <div class="search-wrapper">
                <div>
                    <label>筛选区间：</label>
                    <el-date-picker
                        v-model="startTime"
                        type="date"
                        placeholder="开始时间"
                        value-format="yyyy/MM/dd"
                        format="yyyy年MM月dd日"
                        size="small"
                        style="width:160px"
                        >
                    </el-date-picker>
                        至
                    <el-date-picker
                        v-model="endTime"
                        type="date"
                        value-format="yyyy/MM/dd"
                        format="yyyy年MM月dd日"
                        placeholder="结束时间"
                        size="small"
                        style="width:160px"
                        >
                    </el-date-picker>
                    <el-button  size="mini" type="primary" icon="el-icon-search" @keyup. style="margin-left:10px" @keyup.enter.native="handleGetTableList" @click="handleGetTableList">查询</el-button>
                </div>
                <div>
                    <el-button  size="mini" type="success"  icon="el-icon-upload2" class="btn" @click="handleExportData" plain>导出</el-button>
                    
                    <el-tooltip class="item" effect="dark" content="无新增权限" placement="top-start" :disabled="showRoleAdd == 1">
                        <el-button  size="mini" type="warning"  icon="el-icon-document-copy" class="btn" @click="handleAddDataItem" plain :disabled="showRoleAdd == 0">数据录入</el-button>
                    </el-tooltip>
                </div>
            </div>

            <div class="table-wrapper">
                <div class="stats-info" v-if="tableList.length > 0">
                    <span class="stat-item">
                        <i class="el-icon-document"></i>
                        共 {{ tableList.length }} 条记录
                    </span>
                    <span class="stat-item">
                        <i class="el-icon-success greenText"></i>
                        正常: {{ normalCount }}条
                    </span>
                    <span class="stat-item">
                        <i class="el-icon-warning blueText"></i>
                        轻微异常: {{ abnormalCount1 }}条
                    </span>
                    <span class="stat-item">
                        <i class="el-icon-warning orangeText"></i>
                        中度异常: {{ abnormalCount2 }}条
                    </span>
                    <span class="stat-item">
                        <i class="el-icon-warning redText"></i>
                        重度异常: {{ abnormalCount3 }}条
                    </span>
                </div>
                <el-table :data="tableList" border stripe height="calc(100vh - 320px)" v-if="tableList.length > 0">
                    <el-table-column align="center" label="巡视日期" prop="watchTime" width="160">
                        <template slot-scope="scope">
                            <span class="blueText">{{ scope.row.watchTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="巡视部位" prop="treeName" width="160" show-overflow-tooltip/>  
                    <el-table-column align="center" label="巡视项目" prop="cont" width="160" show-overflow-tooltip/>
                    <el-table-column align="center" label="检查内容" prop="request" width="260" show-overflow-tooltip/>
                    <el-table-column align="center" label="巡查情况" prop="remark" width="200" show-overflow-tooltip/>
                    <el-table-column align="center" label="照片/视频" prop="inspectionFiles" width="170" class-name="media-column">
                     <template slot-scope="scope">
                        <div class="media-cell">
                            <el-badge 
                                :value="scope.row.inspectionFiles.length" 
                                :max="99" 
                                type="primary"
                                v-if="scope.row.inspectionFiles.length > 0">
                               <i class="iconfont blueText ico" @click="handleShowImageView(scope.row)">&#xe611;</i>
                            </el-badge>
                            <span v-else class="no-media" @click="handleShowImageView(scope.row)">暂无(点击上传)</span>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column align="center" label="评判" prop="judgement">
                      <template slot-scope="scope">
                        <p v-if="scope.row.judgement == 1">
                            <el-tag type="success" size="small">正常</el-tag>
                        </p>
                        <p v-if="scope.row.judgement == 2">
                            <el-tag type="primary" size="small">轻微异常</el-tag>
                        </p>
                        <p v-if="scope.row.judgement == 3">
                            <el-tag type="warning" size="small">中度异常</el-tag>
                        </p>
                        <p v-if="scope.row.judgement == 4 ">
                            <el-tag type="danger" size="small">重度异常</el-tag></p>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="巡查人员" prop="recordUserName" width="150">
                        <template slot-scope="scope">
                            <i class="iconfont blueText">&#xe716;</i>
                            {{ scope.row.recordUserName || '暂无' }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="审核人员" prop="checkUserName"  width="150">
                        <template slot-scope="scope">
                            <i class="iconfont blueText">&#xe60c;</i>
                            {{ scope.row.checkUserName || '暂无' }}
                        </template>
                    </el-table-column> 
                    
                    <el-table-column align="center" label="审核状态" prop="status" width="120">
                      <template slot-scope="scope">
                        <el-select
                            size="mini"  
                            placeholder="请选择"
                            v-model="scope.row.status"
                            @change="handleChangeCheckStatus(scope.row)"
                        >
                          <el-option label="未审核" :value="0"></el-option>
                          <el-option label="审核通过" :value="1"></el-option>
                          <el-option label="审核不通过" :value="2"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label=" 操作" width="220" fixed="right">
                      <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="无编辑权限" placement="top-start" :disabled="showRoleEdit == 1">
                           <el-link type="primary" :underline="false" @click="handleEditDataItem(scope.row)" :disabled="showRoleEdit == 0"><i class="el-icon-edit"></i>编辑</el-link>
                        </el-tooltip>

                        <el-tooltip class="item" effect="dark" content="无删除权限" placement="top-start" :disabled="showRoleDel == 1">
                           <el-link type="danger" :underline="false"  style="margin-left:10px" @click="handleDeldataItem(scope.row)" :disabled="showRoleDel == 0"><i class="el-icon-delete"></i>删除</el-link>
                        </el-tooltip>

                        <el-tooltip class="item" effect="dark" content="无编辑权限" placement="top-start" :disabled="showRoleEdit == 1">
                           <el-link type="success" :underline="false"  style="margin-left:10px"  @click="handleGenerateLedger(scope.row)" :disabled="showRoleEdit == 0"><i class="el-icon-tickets"></i>生成台帐</el-link>
                        </el-tooltip>   
                      </template>
                    </el-table-column>
                </el-table>
                <noData v-if="tableList.length == 0" showData/>
            </div>
        </div>

        <!-- 弹窗部分 -->
        <el-dialog 
            title="图片/视频预览" 
            :visible.sync="dialogImageVisible" 
            width="70%" 
            top="5vh"
            class="media-dialog"
            :close-on-click-modal="false">
            <div class="media-preview">
                <div v-if="imageList.length > 0" class="media-content">
                    <el-carousel 
                        :interval="5000" 
                        height="400px" 
                        indicator-position="outside"
                        @change="handleChangeCarousel">
                        <el-carousel-item v-for="(item, index) in imageList" :key="index">
                            <div class="media-item">
                                <el-image 
                                    v-if="item.tp == 1"
                                    :src="item.url" 
                                    fit="contain"
                                    style="height: 100%;">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                
                                <video 
                                    v-else-if="item.tp == 2"
                                    :src="item.url" 
                                    controls
                                    style="max-height: 100%; max-width: 100%;">
                                    您的浏览器不支持视频播放
                                </video>
                                
                                <div class="media-info">
                                    <span>文件 {{ index + 1 }} / {{ imageList.length }}</span>
                                    <span>{{ item.name }}</span>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                    
                    <div class="media-actions">
                        <el-button 
                            @click="handleDelImageView" 
                            type="danger" 
                            size="small" 
                            icon="el-icon-delete">
                            删除当前文件
                        </el-button>
                        <el-upload
                            class="upload-media"
                            action=""
                            :http-request="handleAddImageView"
                            :show-file-list="false">
                            <el-button 
                                size="small" 
                                type="primary" 
                                icon="el-icon-plus">
                                添加文件
                            </el-button>
                        </el-upload>
                    </div>
                </div>
                
                <div v-else class="empty-media">
                    <i class="el-icon-picture-outline"></i>
                    <p>暂无媒体文件</p>
                    <el-upload
                        class="upload-media"
                        action=""
                        :http-request="handleAddImageView"
                        :show-file-list="false">
                        <el-button 
                            size="small" 
                            type="primary" 
                            icon="el-icon-plus">
                            上传文件
                        </el-button>
                    </el-upload>
                </div>
            </div>
        </el-dialog>

        <el-dialog
        title="删除提示"
        :visible.sync="delImageDialog"
        width="500px">
            <div v-if="imageList.length > 0 && imageList[delImageIndex] && imageList[delImageIndex].url">
                <el-image style="height:300px;margin:0 auto" :src="imageList[delImageIndex].url" v-if="imageList[delImageIndex].tp == 1"></el-image>
                <video v-if="imageList[delImageIndex].tp == 2" controls="controls"  width="100%">
                    <source :src="imageList[delImageIndex].url" type="video/ogg">
                    <source :src="imageList[delImageIndex].url" type="video/mp4">
                    您的浏览器不支持此种视频格式
                </video>
            </div>
            <el-alert title="确认要删除该图片/视频？" 
            description="删除后将不可恢复，请谨慎操作，是否继续？"
            effect="dark"  type="error" :closable="false" show-icon>
            </el-alert>
            <div class="dialog-footer">
                <el-button @click="delImageDialog = false" size="small" class="cancel-btn" icon="el-icon-circle-close">取消</el-button>
                <el-button type="danger" @click="handleConfirmDelImage" size="small" class="confirm-btn" icon="el-icon-delete">确定删除</el-button>
            </div>
        </el-dialog>

        <el-dialog 
            :title="editData ? '编辑巡视数据' : '新增巡视数据'" 
            :visible.sync="dataEntryDialogVisible" 
            width="600px"
            :close-on-click-modal="false"
            @closed="handleCancelDataEntry">
            <el-form 
                ref="dataForm" 
                :model="dataForm" 
                label-width="100px" 
                :rules="rules"
                class="data-form">
                
                <el-form-item label="巡视部位" prop="treeName">
                    <el-input v-model="dataForm.treeName" disabled></el-input>
                </el-form-item>
                
                <el-form-item label="检查内容" prop="request">
                    <span>{{this.request || '暂无'}}</span>
                </el-form-item>
                
                <el-form-item label="巡视日期" prop="watchTime" required>
                    <el-date-picker 
                        v-model="dataForm.watchTime" 
                        type="date" 
                        placeholder="选择日期"
                        value-format="yyyy/MM/dd"
                        format="yyyy年MM月dd日"
                        style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                
                <el-form-item label="巡查情况" prop="remark">
                    <el-input 
                        v-model="dataForm.remark" 
                        type="textarea" 
                        :rows="3"
                        placeholder="请输入巡查情况描述" maxlength="300" show-word-limit>
                    </el-input>
                </el-form-item>
                
                <el-form-item label="评判结果" prop="judgement" required>
                    <el-radio-group v-model="dataForm.judgement">
                        <el-radio :label="1">
                            <el-tag type="success" size="small">正常</el-tag>
                        </el-radio>
                        <el-radio :label="2">
                            <el-tag type="primary" size="small">轻微异常</el-tag>
                        </el-radio>
                        <el-radio :label="3">
                            <el-tag type="warning" size="small">中度异常</el-tag>
                        </el-radio>
                        <el-radio :label="4">
                            <el-tag type="danger" size="small">重度异常</el-tag>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                
                <el-form-item label="媒体文件" v-if="!editData">
                    <el-upload
                        class="upload-demo"
                        action=""
                        :http-request="handleUploadFile"
                        multiple
                        :on-remove="handleRemoveUpload"
                        :file-list="fileList"
                        list-type="picture-card"
                        accept=".jpg,.png,.jpeg,.mp4,.mov"
                        :limit="5">
                        <i class="el-icon-plus"></i>
                        <div slot="tip" class="el-upload__tip">
                            可上传jpg/png/jpeg/mp4/mov格式文件，单个文件不超过10MB
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            
            <div  class="dialog-footer">
                <el-button @click="handleCancelDataEntry" size="small" icon="el-icon-circle-close" class="cancel-btn">取消</el-button>
                <el-button type="primary" @click="handleSaveDataEntry" size="small" class="confirm-btn" icon="el-icon-circle-check">保存配置</el-button>
            </div>
        </el-dialog>

        <accountSetting :visible.sync="ledgerDialogVisible" :formLedger="formLedger" @handleCloseLedger="handleCloseLedger"/>

        <el-dialog title="导出设置" :visible.sync="dialogExportVisible" width="590px" v-dialogDrag>
        <el-alert title="请勾选要导出字段" type="info" :closable="false"></el-alert>    
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin: 15px 0;">全选</el-checkbox>
            <el-checkbox-group v-model="checkedGroup" @change="handleCheckedItemChange">
                <el-checkbox v-for="item in exportTree" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
            <div class="dialog-footer" style="margin-top:20px">
             <el-button @click="dialogExportVisible = false" size="small" icon="el-icon-circle-close" class="cancel-btn">取消</el-button>
            <el-button type="primary" @click="handleConfirmhandleExportData" size="small" icon="el-icon-circle-check" class="confirm-btn">确定</el-button>
           </div>
        </el-dialog>
    </div>
</template>
<script>
import cardBox from "@/components/base/cardBox.vue";
import treeMenu from '../../base/treeMenu.vue'
import {inspectionDataGetTree,getInspectionData,inspectionDataDelFile,inspectionDataUpFile,inspectionDataAdd,inspectionDataEdit,getBwNr,inspectionDataDel,ExportInspection,inspectionDataCheckStatus} from '@/api/https'
import noData from '@/components/base/noData.vue'
import accountSetting from '@/components/base/AccountSetting.vue'
import DateUtils from '@/utils/dateUtils'
import permissionMixin from '@/utils/permission.js'
import { findLeafNodes } from '@/utils/treeUtils';
export default ({
    name:'visitationList',
    mixins: [permissionMixin],
    components:{cardBox,treeMenu,noData,accountSetting},
    props:{
        menuSelect:{
            type:Array,
            default:()=>{
                return []
            }
        },
        stationId:{
            type:[String,Number],
            default:''
        },
    },
    data() {
        return {
            currentBoxId:'',
            menuTree:[],
            inspectionID:'',
            startTime:'',
            endTime:'',
            tableList:[],
            imageList:[],
            dialogImageVisible:false,
            delImageDialog:false,
            InspectionDataID:'',
            currentImageIndex:0,
            delImageIndex:0,
            editData:false,
            dataForm:{},
            dataEntryDialogVisible:false,
            rules:{
                watchTime:[{required: true,message:'请选择日期'}],
                judgement:[{required: true,message:'请选择评判'}],
            },
            file:[],
            request:'',
            treeID:'',
            userList:[],
            ledgerDialogVisible:false,
            formLedger:{},
            dialogExportVisible:false,
            exportTree:[{
                label: '巡视日期',
                value:'watchTime',
            },{
                label: '巡视部位',
                value:'treeName',
            },{
                label: '巡视项目',
                value:'cont',
            },{
                label: '检查内容',
                value:'request',
            },{
                label: '巡查情况',
                value:'remark',
            },{
                label: '巡查人员',
                value:'recordUserName',
            },{
                label: '审核人员',
                value:'checkUserName',
            },{
                label: '审核状态',
                value:'status',
            },{
                label: '照片/视频',
                value:'inspectionFiles',
            },{
                label: '评判',
                value:'judgement',
            }],
            checkedGroup:['watchTime','treeName','cont','request','recordUserName','checkUserName','inspectionFiles','judgement','status','remark'],
            isIndeterminate:false,
            checkAll: true,
            fileList:[],
            showRoleAdd:0,
            showRoleEdit:0,
            showRoleDel:0,
        }
    },
    beforeDestroy() {
        if(this.imageList.length > 0){
            this.imageList.forEach(item => {
                if (item.url && item.url.startsWith('blob:')) {
                    URL.revokeObjectURL(item.url)
                }
            })
        }
        this.imageList = []
        this.currentImageIndex = 0;
        this.fileList = []
        this.file = []
        this.$refs.dataForm && this.$refs.dataForm.resetFields()
    },
    mounted(){
        this.startTime = DateUtils.formatDate(DateUtils.getDate('lastyear'))
        this.endTime = DateUtils.formatDate(DateUtils.getDate('today'))
        
        const perm28 = this.getPermissions(28) 
        this.showRoleAdd = perm28.showRoleAdd
        this.showRoleEdit = perm28.showRoleEdit
        this.showRoleDel = perm28.showRoleDel

        if(this.menuSelect.length > 0){
            this.currentBoxId = this.menuSelect[0].id
            this.getTreeData()
        }
    },
    watch:{
        'stationId':{
            handler(newVal,oldVal){
                if (newVal && newVal !== oldVal && oldVal != undefined) {
                    this.tableList =[]
                    this.inspectionID = ''
                    this.treeID =  ''
                    this.request = ''
                    if(this.menuSelect.length > 0){
                        this.currentBoxId = this.menuSelect[0].id
                        this.getTreeData()
                    }else{
                        this.currentBoxId = ''
                    }
                }
            },
            immediate: true
        },
        'menuSelect':{
            handler(newVal,oldVal){
                if (newVal && newVal !== oldVal && oldVal != undefined) {
                    if(this.menuSelect.length > 0){
                        this.currentBoxId = this.menuSelect[0].id
                        this.getTreeData()
                    }
                }
            },
            immediate: true
        }
    },
    computed: {
        normalCount() {
            return this.tableList.filter(item => item.judgement === 1).length;
        },
        abnormalCount1() {
            return this.tableList.filter(item => item.judgement === 2).length;
        },
        abnormalCount2() {
            return this.tableList.filter(item => item.judgement === 3).length;
        },
        abnormalCount3() {
            return this.tableList.filter(item => item.judgement === 4).length;
        }
    },
    methods:{
        getTreeData(){
            inspectionDataGetTree({
                StationID:this.stationId,
                InspectionTypeID:this.currentBoxId
            }).then(res=>{
                if(res.isSuccess && res.data && res.data.length > 0){
                    this.menuTree = res.data
                    const leafInfo = findLeafNodes(this.menuTree);
                    this.inspectionID = leafInfo.nodeId;
                    this.treeID = leafInfo.node.node.treeID
                    this.$nextTick(()=>{
                        this.$refs.treeMenu.$refs.tree.setCurrentKey(this.inspectionID);
                        this.handleGetTableList()
                    })
                }else{
                    this.treeID = ''
                    this.inspectionID = ''
                    this.menuTree = []
                    this.tableList = []
                }
            })
        },
        handleChangeMenuSelect(val){
            this.currentBoxId = val
            this.getTreeData()
        },
        handleMenuLeftClick(data){
            if(data){
                this.inspectionID = data.id
                this.treeID =  data.treeID
                this.request = data.request
                this.handleGetTableList()
            }
        },
        handleGetTableList(){
            if(!this.inspectionID) {
                this.$message.warning('请先选择要查询的目录！')
                return
            }

            if (this.startTime && this.endTime) {
                const start = new Date(this.startTime)
                const end = new Date(this.endTime)
                
                if (end < start) {
                    this.$message.warning('结束时间不能小于开始时间！')
                    return
                }
            }
            
            getInspectionData({
                InspectionID:this.inspectionID,
                begin:this.startTime,
                end:this.endTime
            }).then(res=>{
                if(res.isSuccess){
                    this.tableList = res.data || []
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
        handleShowImageView(data){
            this.imageList = data.inspectionFiles
            this.dialogImageVisible = true
            this.InspectionDataID = data.id
        },
        handleChangeCarousel(index){
            this.currentImageIndex = index
        },
        handleDelImageView(){
            this.delImageIndex = this.currentImageIndex
            this.delImageDialog = true
        },
        handleConfirmDelImage(){
            const id = this.imageList[this.delImageIndex].id
            inspectionDataDelFile(id).then(res=>{
                if(res.isSuccess){
                    this.delImageDialog = false
                    this.$message.success('删除成功！')
                    this.imageList.splice(this.delImageIndex,1)
                   
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
        handleAddImageView(file){
            const formDatas = new FormData();
            formDatas.append("file",file.file)
            formDatas.append("InspectionDataID", this.InspectionDataID)
            inspectionDataUpFile(formDatas).then(res=>{
                if(res.isSuccess){
                    this.imageList.push(res.data)
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
        handleEditDataItem(data){
            this.editData =true
            this.dataForm = {...data}
            this.dataEntryDialogVisible = true
        },
        handleAddDataItem(){
            const len = this.treeID.toString().replace('.', '').length
            if(this.inspectionID != '' &&  this.treeID && len >= 5){
                getBwNr({
                    InspectionID:this.inspectionID
                }).then(res=>{
                    if(res.isSuccess){
                        const watchTime =  DateUtils.formatDate(DateUtils.getDate('today'))
                        const _data = {...this.dataForm}
                        _data.watchTime = watchTime
                        _data.judgement = 1
                        _data.treeName = res.data
                        this.dataForm = {..._data}
                        this.dataEntryDialogVisible = true
                    }
                })
            }else{
                this.$message.warning('未选择目录或者该目录不是最底层')
            }
        },
        handleCancelDataEntry(){
            this.editData = false
            this.dataForm = {}
            this.file = []
            this.dataEntryDialogVisible = false
        },
        handleSaveDataEntry(){
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const {watchTime,cont,judgement,status,remark,id,inspectionID,checkUser,recordUser} = {...this.dataForm}
                    if(this.editData){
                        const data = {
                            watchTime:watchTime,
                            cont:cont || '',
                            judgement:judgement,
                            status:status,
                            remark:remark,
                            id:id,
                            inspectionID:inspectionID,
                            recordUser :recordUser,
                            checkUser:checkUser,
                            stationID:this.stationId,
                        }
                        inspectionDataEdit(data).then(res=>{
                            if(res.isSuccess){
                                this.handleCancelDataEntry()
                                this.handleGetTableList()
                            }else{
                                this.$message.error(res.errorMessage)
                            }
                        })
                    }else{
                        const formDatas = new FormData(); 
                        formDatas.append("inspectionID", this.inspectionID)
                        formDatas.append("stationID", this.stationId)
                        formDatas.append("CheckUser", 0)
                        formDatas.append("recordUser", 0)
                        formDatas.append("watchTime", watchTime)
                        formDatas.append("cont", cont || '')
                        formDatas.append("judgement", judgement)
                        formDatas.append("status", 0)
                        formDatas.append("remark", remark || '')
                        if (this.file.length > 0) {
                            this.file.forEach(item=>{
                                formDatas.append("files",item)
                            })
                        } 
                        inspectionDataAdd(formDatas).then(res=>{
                            if(res.isSuccess){
                                 this.handleCancelDataEntry()
                                this.handleGetTableList()
                                
                            }else{
                            this.$message.error(res.errorMessage)
                            }
                        })
                    
                    }
                } else {
                    return false;
                }
            });
        },
        // 上传
        handleUploadFile(file){ 
            this.file.push(file.file)
        },
        handleRemoveUpload(file){
            const index = this.file.findIndex(item=>  {
                return item.name == file.name
            })
            if(index > -1){
                this.file.splice(index,1)
            }
        },
        handleDeldataItem(data){
            this.$confirm(`确认删除时间为 ${data.watchTime} 的巡视记录？`,'提示',{
                type:'warning',
                confirmButtonText: '确定删除',
                cancelButtonText: '取消',
                confirmButtonClass: 'el-button--danger',
            }).then(() => {
                inspectionDataDel({ID:data.id}).then(res=>{
                    if(res.isSuccess){
                        this.handleGetTableList()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }).catch(() => {}); 
        },
        handleGenerateLedger(data){
            this.formLedger = {
                cont:data.request || '',
                foundTime:DateUtils.formatDate(DateUtils.getDate('today')),
                recorderName:sessionStorage.getItem('userName'),
                CATEGROY:3,
                tp:`${data.treeName}[${data.cont}]`,
                describe:data.remark,
                result:'',
                status:0,
                StationID:Number(this.stationId),
                ID:0,
                sourceID:data.id
            }
            this.ledgerDialogVisible = true
        },
        handleCloseLedger(){
            this.formLedger = {}
        },
        handleExportData(){
            if(this.inspectionID == ''){
                this.$message.warning('请先选择目录!')
                return false
            }else if(this.tableList == null || this.tableList.length <= 0){
                this.$message.warning('当前无数据可导出!')
                return false
            }else{
                this.dialogExportVisible = true
            }
        },
        handleConfirmhandleExportData(){
            ExportInspection({
                InspectionID:this.inspectionID,
                begin:this.startTime,
                end:this.endTime,
                fields:this.checkedGroup
            }).then(res =>{
                if (res.isSuccess) {
                    window.location.href= res.data  
                    this.dialogExportVisible = false 
                }else{
                    this.$message.error(res.errorMessage)
                }
                
            })
        },
        handleChangeCheckStatus(data){
            inspectionDataCheckStatus({
                ID:data.id,
                Status:data.status
            }).then(res=>{
                if(res.isSuccess){
                    this.$message.success('设置成功！')
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
        handleCheckAllChange(val) {
            if(val){
                this.checkedGroup = ['watchTime','treeName','cont','request','recordUserName','checkUserName','inspectionFiles','judgement','status','remark']
            }else{
                this.checkedGroup = []
            }
            this.isIndeterminate = false;
        },
        handleCheckedItemChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.exportTree.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.exportTree.length;
        }
    }
})
</script>

<style scoped lang="scss">
.template-wrapper{
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - 175px);
}
.menu-wrapper{
    width: 340px;
    height: calc(100vh - 185px);
    flex-shrink: 0;
    margin-top:10px;
    .menu-tree{
        height: calc(100vh - 260px);
        overflow-y: auto;
    }
} 
.right-wrapper{
  overflow: auto;
}
.search-wrapper{
    background: #fff;
    margin:10px 0 0 10px;
    border-radius: 3px;
    height: 60px;
    padding:14px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.table-wrapper{
    background: #fff;
    margin:10px 0 0 10px;
    border-radius: 3px;
    height: calc(100vh - 255px);
    flex: 1;
    overflow: auto; 
    padding:10px;
    box-sizing: border-box;
    .ico{
        font-size: 18px;
        vertical-align: middle;
        &:hover{
            cursor: pointer;
        }
    }
}

.no-media {
    color: #C0C4CC;
    font-size: 12px;
}

.media-dialog {
    .media-preview {
        .media-content {
            .media-item {
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                
                .media-info {
                    margin-top: 10px;
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    font-size: 14px;
                    color: #606266;
                }
            }
        }
        
        .media-actions {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .empty-media {
            text-align: center;
            padding: 40px 0;
            
            i {
                font-size: 64px;
                color: #C0C4CC;
                margin-bottom: 15px;
            }
            
            p {
                color: #909399;
                margin-bottom: 20px;
            }
        }
    }
}
::v-deep .el-table {
    .media-column {
        .cell {
            padding: 5px 8px !important;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 40px;
        }
        .el-table__body-wrapper {
            .el-table__cell {
                .cell {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
    
}
.stats-info {
    display: flex;
    gap: 10px;
    padding: 8px 16px;
    background-color:#F4F4F5;
    border-radius:4px;
    margin-bottom: 10px;
    .stat-item {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #909399;
        
        i {
            margin-right: 5px;
        }
    }
}

.action-buttons {
    display: flex;
    gap: 10px;
}
</style>
